<template>
    <div class="home">
        <el-row>
            <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index" class="flex padding-15px border-1">
                <div class="img-left">
                    <img :src="item.img" alt="" />
                </div>
                <div class="grid-content bg-purple">{{ item.name }}--{{ item.price }}</div>
            </el-col>
        </el-row>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>待处理事务</span>
            </div>
            <el-row :gutter="30">
                <el-col :span="8" v-for="(item, index) in 3" :key="index">
                    <div class="flex-center-between order-msg-con">
                        <div>待付款订单</div>
                        <div class="order-msg">(10)</div>
                    </div>
                    <div class="flex-center-between order-msg-con">
                        <div>待发货订单</div>
                        <div class="order-msg">(20)</div>
                    </div>
                    <div class="flex-center-between order-msg-con">
                        <div>已发货订单</div>
                        <div class="order-msg">(13)</div>
                    </div>
                </el-col>
            </el-row>
        </el-card>

        <div>
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>商品总览</span>
                        </div>
                        <div class="text item">
                            <el-row>
                                <el-col :span="6" v-for="(item, index) in productorTotalList" :key="index">
                                    <div>
                                        <el-row class="text-center margin-bottom-10px">
                                            <span class="numRed">{{ item.total }}</span>
                                        </el-row>
                                        <el-row class="text-center">
                                            <span>{{ item.name }}</span>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>用户总览</span>
                        </div>
                        <div class="text item">
                            <el-row>
                                <el-col :span="6" v-for="(item, index) in userTotalList" :key="index">
                                    <div>
                                        <el-row class="text-center margin-bottom-10px">
                                            <span class="numRed">{{ item.total }}</span>
                                        </el-row>
                                        <el-row class="text-center">
                                            <span>{{ item.name }}</span>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>订单总计</span>
            </div>
            <el-row>
                <el-col :span="4" class="border-right left-surface">
                    <el-row v-for="(order, index) in orderTotalList" :key="index">
                        <div>{{ order.name }}</div>
                        <div class="totale-order">{{ order.total }}</div>
                        <div>
                            <span :class="order.percentage > 0 ? 'color-green' : 'color-red'">
                                {{ order.percentage > 0 ? "+" : "" }}{{ order.percentage }}%
                            </span>
                            <span>同比上个月</span>
                        </div>
                    </el-row>
                </el-col>
                <el-col :span="20">
                    <div id="echarts-main"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Home",
    data: function() {
        return {
            dingdanArr: [
                {
                    id: 1,
                    name: "今日订单总数",
                    price: "200",
                    //在 js里面获取 vue项目的本地图片 ，需要使用  require
                    img: require("@/assets/images/home_order.png"),
                },
                {
                    id: 2,
                    name: "今日订单总数1",
                    price: "300",
                    img: require("@/assets/images/home_order.png"),
                },
                {
                    id: 3,
                    name: "今日订单总数2",
                    price: "400",
                    img: require("@/assets/images/home_order.png"),
                },
            ],
            productorTotalList: [
                {
                    name: "已下架",
                    total: 100,
                },
                {
                    name: "已上架",
                    total: 400,
                },
                {
                    name: "库存紧张",
                    total: 50,
                },
                {
                    name: "全部商品",
                    total: 500,
                },
            ],
            userTotalList: [
                {
                    name: "今日新增",
                    total: 100,
                },
                {
                    name: "昨日新增",
                    total: 500,
                },
                {
                    name: "本月新增",
                    total: 1000,
                },
                {
                    name: "会员总数",
                    total: 5000,
                },
            ],
            orderTotalList: [
                {
                    name: "本月订单统计",
                    total: 10000,
                    percentage: 10,
                },
                {
                    name: "本周订单统计",
                    total: 1000,
                    percentage: -10,
                },
                {
                    name: "本月销售统计",
                    total: 5000,
                    percentage: 10,
                },
                {
                    name: "本周销售统计",
                    total: 50000,
                    percentage: -10,
                },
            ],
        };
    },
    methods: {
        drawChart() {
            let myEchart = this.$echarts.init(document.getElementById("echarts-main"));

            let option = {
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["本月订单", "本周订单", "本月销售", "本周销售"],
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ["line", "bar"] },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: "category",
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "本月订单",
                        type: "bar",
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        markPoint: {
                            data: [
                                { type: "max", name: "最大值" },
                                { type: "min", name: "最小值" },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }],
                        },
                    },
                    {
                        name: "本周订单",
                        type: "bar",
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint: {
                            data: [
                                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }],
                        },
                    },
                    {
                        name: "本月销售",
                        type: "bar",
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint: {
                            data: [
                                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }],
                        },
                    },
                    {
                        name: "本周销售",
                        type: "bar",
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        markPoint: {
                            data: [
                                { name: "年最高", value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                { name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 },
                            ],
                        },
                        markLine: {
                            data: [{ type: "average", name: "平均值" }],
                        },
                    },
                ],
            };

            myEchart.setOption(option);
        },
    },
    mounted() {
        this.drawChart();
    },
};
</script>

<style lang="scss" scoped>
.home {
    .border-1 {
        border: 1px solid #eee;
    }
    .el-col {
        border-radius: 4px;
    }
    .img-left {
        img {
            width: 80px;
        }
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both;
    }

    .box-card {
        width: 100%;
        margin: 10px auto;
    }
    .numRed {
        color: red;
        font-size: 18px;
        font-weight: 600;
    }
    #echarts-main {
        height: 400px;
    }

    .left-surface {
        div {
            margin-bottom: 10px;
        }
        .totale-order {
            font-size: 20px;
            font-weight: 500;
        }
        .color-red {
            color: rgb(67, 194, 135);
        }
        .color-green {
            color: red;
        }
    }
    .order-msg-con {
        border-bottom: 1px dashed #eee;
        padding-bottom: 8px;
        margin-bottom: 8px;
        .order-msg {
            color: red;
        }
    }
}
</style>
